import { View, Text, ViewProps } from "@tarojs/components";
import { usePopup } from "@/store/popup";
import "./index.less";
import { Option, TValue } from "@/types";
import { getOptionTxt } from "@/utils";
import Tabs from "../Tabs";

type IProps = {
  label: string;
  value?: string | number;
} & ViewProps;

type PickerProps = {
  options?: Option[];
  onConfirm?: (val: TValue) => void;
  value: string | number;
} & IProps;

type RadioProps = {
  options?: Option[];
  value: string | number;
  onChange?: (value: TValue) => void;
} & IProps;

export const PickerTrigger = ({
  label,
  value,
  options = [],
  onConfirm,
  ...others
}: PickerProps) => {
  const { openPopup } = usePopup();
  return (
    <View
      className="trigger form-item"
      {...others}
      onClick={() =>
        openPopup({
          type: "picker",
          props: {
            value,
            options,
          },
          round: true,
          onConfirm,
        })
      }
    >
      <Text className="label">{label}</Text>
      <View className="handler">
        <Text className="value">{getOptionTxt(value, options)}</Text>
        {/* <View className={`arrow ${visible ? "active" : ""}`} /> */}
        <View className="arrow" />
      </View>
    </View>
  );
};

const BaseTrigger = ({ label, value = "", ...others }: IProps) => {
  return (
    <View className="trigger form-item" {...others}>
      <Text className="label">{label}</Text>
      <View className="handler">
        <Text className="value">{value}</Text>
        <View className="arrow" />
      </View>
    </View>
  );
};

export const RadioTrigger = ({
  label,
  value = "",
  options = [],
  onChange,
  ...others
}: RadioProps) => {
  return (
    <View className="trigger form-item" {...others}>
      <Text className="label">{label}</Text>
      <View className="handler">
        <Tabs options={options} value={value} onChange={onChange} />
      </View>
    </View>
  );
};

export const NumberTrigger = ({
  label,
  value,
  options = [],
  onConfirm,
  ...others
}: PickerProps) => {
  const { openPopup } = usePopup();
  return (
    <View
      className="trigger form-item"
      {...others}
      onClick={() =>
        openPopup({
          round: false,
          type: "number",
          showConfirm: false,
          props: {
            label,
            initValue: String(value),
          },
          onConfirm,
        })
      }
    >
      <Text className="label">{label}</Text>
      <View className="handler">
        <Text className="value">{value}</Text>
        <View className="arrow" />
      </View>
    </View>
  );
};

export default BaseTrigger;
